<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换</title>
    <style>
        /* 
        1.translate
            移动盒子的位置的方法有：定位 盒子的外边距 2d转换移动
            translate最大的优点：不会影响其他盒子的位置(相对定位会改变 offsetTop 和 offsetLeft 的值)
            translate 对于行内元素无效
         */
        .demo1 {
            width: 200px;
            height: 300px;
            background-color: #00ff00;
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); 相当于下面两句*/
            /* transform: translateX(100px); 只移动x轴方向 */
            /* transform: translateY(100px); 只移动y轴方向 */
            /* transform: translate(50%, 10%); 百分比相当于自身元素对应轴方向的尺寸 */
            transform: translate3d(100px, 200px, 300px);
        }

        .demo2 {
            width: 20px;
            height: 10px;
            background-color: #ff00ff;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 
        2.rotate
            旋转
            transform: rotate(90deg);
            transform-origin: x y; 默认值是 50% 50%
            50% 50px left/top/bottom/center/right
         */

         /* 
         3.缩放 scale
         transform: scale(x, y);
         x,y 写没有单位的值，分别为原来高度和宽度的倍数，会影响阴影等
         transfor: scale(2); 等比例缩放
         修改 width 和 height 改变大小时，宽度往两边延申，高度往下延申
         scale 的优势：不会影响其他盒子位置，而且可以通过 transform-origin 设置缩放的中心点，默认是 50% 50% 处为中心点
          */ 

          /* 
          连写
          transform: translate() rotate() scale() 
          位移要写在最前面，否则位移时的坐标轴的方向会改变
           */
        .demo3 {
            width: 200px;
            height: 20px;
            background-color: #ff00ff;
            transform: rotate(45deg);
            transition: all 3s;
        }

        .demo3:hover {
            background-color: #00ff00;
            transform: rotate(80deg);
        }

        .demo4 {
            width: 500px;
            height: 500px;
            position: relative;
            left: 400px;
            border: 1px solid red;
        }

        .demo4-translate {
            width: 100px;
            height: 100px;
            background-color: #ff00ff;
        }

        .demo4-z-index {
            width: 100px;
            height: 100px;
            background-color: #00ff00;
            position: relative;
            top: -30px;
            left: 70px;
            transition: all 3s;
        }

        .demo4-z-index {
            transform: translate3d(0px, 0px, -100px);
        }

        .demo5 {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .demo5::before {
            content: "";
            width: 100px;
            height: 100px;
            background-color: green;
            display: block;
            transition: all 3s;
        }
        .demo5::after {
            content: "";
            width: 100px;
            height: 100px;
            background-color: yellow;
            display: block;
            transition: all 3s;
        }

        .demo5:hover::before {
            transform: translate3d(100px, 100px, 100px);
        }
        .demo5:hover::after {
            transform: translate(100px, -100px);
        }

        .demo6 {
            border-right: 10px solid red;
            border-bottom: 10px solid black;
            border-left: 10px solid #ffffff;
            border-top: 10px solid #ffffff;
            transform: rotate(45deg);
            width: 100px;
            height: 100px;
            margin-left: 10px;
            transition: all 3s;
            transform-origin: right bottom;
        }

        .demo6:hover {
            transform: rotate(225deg);
        }

        .demo7 {
            width: 100px;
            height: 100px;
            transition: all 3s;
            background-color: #000fff;
        }
        .demo7:hover {
            transform: scale(.5, 2);
        }
    </style>
</head>
<body>
    <div class="demo1">
        <div class="demo2">居中效果</div>
    </div>
    <div class="demo3">长安剑</div>
    <div class="demo4">
        <div class="demo4-translate">translate</div>
        <div class="demo4-z-index">z-index</div>
    </div>
    <div class="demo5">button</div>
    <div class="demo6"></div>
    <div class="demo7"></div>
</body>
</html>